<template>
  <view class="alerts-container">
    <!-- 连接状态 -->
    <view class="connection-status" :class="connectionStatus">
      <view class="status-indicator">
        <text class="iconfont" :class="getStatusIcon()"></text>
      </view>
      <view class="status-text">
        <view class="status-title">{{ getStatusTitle() }}</view>
        <view class="status-desc">{{ getStatusDesc() }}</view>
      </view>
      <button class="reconnect-btn" v-if="connectionStatus === 'disconnected'" @click="reconnect">
        重连
      </button>
    </view>

    <!-- 告警筛选 -->
    <view class="filter-section">
      <scroll-view scroll-x class="filter-scroll">
        <view class="filter-list">
          <view 
            class="filter-item"
            :class="{ 'active': selectedFilter === filter.key }"
            v-for="filter in alertFilters"
            :key="filter.key"
            @click="selectFilter(filter.key)"
          >
            {{ filter.label }}
            <view class="filter-badge" v-if="filter.count > 0">{{ filter.count }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 告警列表 -->
    <view class="alerts-list">
      <view 
        class="alert-item"
        :class="'level-' + alert.level"
        v-for="alert in filteredAlerts"
        :key="alert.id"
        @click="viewAlertDetail(alert)"
      >
        <view class="alert-header">
          <view class="alert-level" :class="'level-' + alert.level">
            <text class="iconfont" :class="getLevelIcon(alert.level)"></text>
            {{ getLevelText(alert.level) }}
          </view>
          <view class="alert-time">{{ formatTime(alert.timestamp) }}</view>
        </view>
        
        <view class="alert-content">
          <view class="alert-title">{{ alert.title }}</view>
          <view class="alert-message">{{ alert.content }}</view>
          <view class="alert-location" v-if="alert.location">
            <text class="iconfont icon-location"></text>
            {{ alert.location }}
          </view>
        </view>
        
        <view class="alert-actions" v-if="!alert.acknowledged">
          <button class="action-btn ack-btn" @click.stop="acknowledgeAlert(alert)">
            <text class="iconfont icon-check"></text>
            确认
          </button>
          <button class="action-btn share-btn" @click.stop="shareAlert(alert)">
            <text class="iconfont icon-share"></text>
            分享
          </button>
        </view>
        
        <view class="alert-status" v-if="alert.acknowledged">
          <text class="iconfont icon-check-circle"></text>
          已确认 · {{ formatTime(alert.acknowledgedTime) }}
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredAlerts.length === 0">
        <image src="/static/images/empty-alerts.png" class="empty-image" />
        <view class="empty-text">暂无告警信息</view>
        <view class="empty-desc">系统将实时推送重要告警消息</view>
      </view>
    </view>

    <!-- 告警详情弹窗 -->
    <uni-popup ref="alertDetailPopup" type="bottom" background-color="#ffffff">
      <view class="alert-detail-popup">
        <view class="popup-header">
          <view class="popup-title">告警详情</view>
          <view class="popup-close" @click="closeAlertDetail">
            <text class="iconfont icon-close"></text>
          </view>
        </view>
        
        <view class="detail-content" v-if="selectedAlert">
          <view class="detail-level" :class="'level-' + selectedAlert.level">
            <text class="iconfont" :class="getLevelIcon(selectedAlert.level)"></text>
            {{ getLevelText(selectedAlert.level) }}
          </view>
          
          <view class="detail-title">{{ selectedAlert.title }}</view>
          <view class="detail-message">{{ selectedAlert.content }}</view>
          
          <view class="detail-info">
            <view class="info-row">
              <text class="info-label">时间：</text>
              <text class="info-value">{{ formatDateTime(selectedAlert.timestamp) }}</text>
            </view>
            <view class="info-row" v-if="selectedAlert.location">
              <text class="info-label">位置：</text>
              <text class="info-value">{{ selectedAlert.location }}</text>
            </view>
            <view class="info-row" v-if="selectedAlert.category">
              <text class="info-label">类型：</text>
              <text class="info-value">{{ selectedAlert.category }}</text>
            </view>
            <view class="info-row" v-if="selectedAlert.source">
              <text class="info-label">来源：</text>
              <text class="info-value">{{ selectedAlert.source }}</text>
            </view>
          </view>
          
          <view class="detail-description" v-if="selectedAlert.description">
            <view class="desc-title">详细描述：</view>
            <view class="desc-content">{{ selectedAlert.description }}</view>
          </view>
          
          <view class="detail-instructions" v-if="selectedAlert.instructions">
            <view class="instructions-title">处理建议：</view>
            <view class="instructions-list">
              <view 
                class="instruction-item"
                v-for="(instruction, index) in selectedAlert.instructions"
                :key="index"
              >
                {{ index + 1 }}. {{ instruction }}
              </view>
            </view>
          </view>
        </view>
        
        <view class="detail-actions" v-if="selectedAlert && !selectedAlert.acknowledged">
          <button class="detail-btn ack-btn" @click="acknowledgeAlert(selectedAlert)">
            <text class="iconfont icon-check"></text>
            确认告警
          </button>
          <button class="detail-btn emergency-btn" @click="callEmergency">
            <text class="iconfont icon-phone"></text>
            紧急联系
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 设置弹窗 -->
    <uni-popup ref="settingsPopup" type="bottom" background-color="#ffffff">
      <view class="settings-popup">
        <view class="popup-header">
          <view class="popup-title">告警设置</view>
          <view class="popup-close" @click="closeSettings">
            <text class="iconfont icon-close"></text>
          </view>
        </view>
        
        <view class="settings-content">
          <view class="setting-group">
            <view class="group-title">接收设置</view>
            <view class="setting-item">
              <view class="setting-label">高级别告警</view>
              <switch 
                :checked="alertSettings.high" 
                @change="toggleAlertLevel('high', $event)"
                color="#f5222d"
              />
            </view>
            <view class="setting-item">
              <view class="setting-label">中级别告警</view>
              <switch 
                :checked="alertSettings.medium" 
                @change="toggleAlertLevel('medium', $event)"
                color="#fa8c16"
              />
            </view>
            <view class="setting-item">
              <view class="setting-label">低级别告警</view>
              <switch 
                :checked="alertSettings.low" 
                @change="toggleAlertLevel('low', $event)"
                color="#52c41a"
              />
            </view>
          </view>
          
          <view class="setting-group">
            <view class="group-title">通知方式</view>
            <view class="setting-item">
              <view class="setting-label">声音提醒</view>
              <switch 
                :checked="alertSettings.sound" 
                @change="toggleSetting('sound', $event)"
                color="#1890ff"
              />
            </view>
            <view class="setting-item">
              <view class="setting-label">震动提醒</view>
              <switch 
                :checked="alertSettings.vibration" 
                @change="toggleSetting('vibration', $event)"
                color="#1890ff"
              />
            </view>
            <view class="setting-item">
              <view class="setting-label">屏幕显示</view>
              <switch 
                :checked="alertSettings.display" 
                @change="toggleSetting('display', $event)"
                color="#1890ff"
              />
            </view>
          </view>
        </view>
        
        <view class="settings-actions">
          <button class="settings-btn save-btn" @click="saveSettings">
            保存设置
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 悬浮按钮 -->
    <view class="floating-actions">
      <view class="fab-item" @click="showSettings">
        <text class="iconfont icon-settings"></text>
      </view>
      <view class="fab-item" @click="refreshAlerts">
        <text class="iconfont icon-refresh"></text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'AlertsPage',
  data() {
    return {
      selectedFilter: 'all',
      selectedAlert: null,
      connectionStatus: 'connected', // connected, connecting, disconnected
      
      // 筛选选项
      alertFilters: [
        { key: 'all', label: '全部', count: 0 },
        { key: 'unread', label: '未读', count: 0 },
        { key: 'high', label: '高级', count: 0 },
        { key: 'medium', label: '中级', count: 0 },
        { key: 'low', label: '低级', count: 0 }
      ],
      
      // 告警设置
      alertSettings: {
        high: true,
        medium: true,
        low: false,
        sound: true,
        vibration: true,
        display: true
      },
      
      // Mock告警数据
      alerts: [
        {
          id: 'alert001',
          title: '医院停电通知',
          content: '由于设备维护，医院将于今晚22:00-06:00停电，请患者提前安排就诊时间',
          level: 'high',
          timestamp: Date.now() - 300000,
          acknowledged: false,
          location: '医院主楼',
          category: '设施维护',
          source: '医院管理部',
          description: '为确保医疗设备正常运行，医院将进行电力系统维护保养',
          instructions: [
            '急诊科正常接诊',
            '住院部备用电源保障',
            '门诊患者请提前安排时间',
            '如有紧急情况请联系值班人员'
          ]
        },
        {
          id: 'alert002',
          title: '排队人数较多',
          content: '内科门诊当前排队人数较多，预计等待时间2小时',
          level: 'medium',
          timestamp: Date.now() - 600000,
          acknowledged: true,
          acknowledgedTime: Date.now() - 300000,
          location: '内科门诊',
          category: '排队提醒',
          source: '排队系统'
        }
      ]
    }
  },
  computed: {
    ...mapState('alerts', ['wsConnected', 'unreadCount']),
    
    // 过滤后的告警列表
    filteredAlerts() {
      let alerts = this.alerts
      
      switch (this.selectedFilter) {
        case 'unread':
          alerts = alerts.filter(alert => !alert.acknowledged)
          break
        case 'high':
        case 'medium':
        case 'low':
          alerts = alerts.filter(alert => alert.level === this.selectedFilter)
          break
      }
      
      return alerts.sort((a, b) => b.timestamp - a.timestamp)
    }
  },
  onLoad() {
    this.initPage()
  },
  onShow() {
    this.refreshAlerts()
  },
  onHide() {
    // 页面隐藏时不断开连接，继续接收告警
  },
  onUnload() {
    this.disconnectWebSocket()
  },
  methods: {
    ...mapActions('alerts', ['connectWebSocket', 'disconnectWebSocket', 'acknowledgeAlertById']),

    // 初始化页面
    async initPage() {
      try {
        this.loadSettings()
        await this.connectWebSocket()
        this.updateFilterCounts()
      } catch (error) {
        console.error('初始化失败:', error)
      }
    },

    // 刷新告警
    async refreshAlerts() {
      try {
        // 实际项目中从服务器获取最新告警
        this.updateFilterCounts()
      } catch (error) {
        console.error('刷新失败:', error)
      }
    },

    // 选择筛选条件
    selectFilter(filterKey) {
      this.selectedFilter = filterKey
    },

    // 更新筛选数量
    updateFilterCounts() {
      this.alertFilters.forEach(filter => {
        switch (filter.key) {
          case 'all':
            filter.count = this.alerts.length
            break
          case 'unread':
            filter.count = this.alerts.filter(alert => !alert.acknowledged).length
            break
          case 'high':
          case 'medium':
          case 'low':
            filter.count = this.alerts.filter(alert => alert.level === filter.key).length
            break
        }
      })
    },

    // 查看告警详情
    viewAlertDetail(alert) {
      this.selectedAlert = alert
      this.$refs.alertDetailPopup.open()
      
      // 标记为已读
      if (!alert.read) {
        alert.read = true
        this.updateFilterCounts()
      }
    },

    // 关闭告警详情
    closeAlertDetail() {
      this.$refs.alertDetailPopup.close()
      this.selectedAlert = null
    },

    // 确认告警
    async acknowledgeAlert(alert) {
      try {
        // 调用API确认告警
        await this.acknowledgeAlertById(alert.id)
        
        // 更新本地状态
        alert.acknowledged = true
        alert.acknowledgedTime = Date.now()
        
        this.updateFilterCounts()
        this.closeAlertDetail()
        
        uni.showToast({
          title: '已确认告警',
          icon: 'success'
        })
      } catch (error) {
        console.error('确认告警失败:', error)
        uni.showToast({
          title: '操作失败',
          icon: 'error'
        })
      }
    },

    // 分享告警
    shareAlert(alert) {
      const shareText = `【${this.getLevelText(alert.level)}告警】${alert.title}\n${alert.content}`
      
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 1,
        summary: shareText,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        },
        fail: (error) => {
          console.error('分享失败:', error)
          // 降级到复制文本
          uni.setClipboardData({
            data: shareText,
            success: () => {
              uni.showToast({
                title: '已复制到剪贴板',
                icon: 'success'
              })
            }
          })
        }
      })
    },

    // 紧急联系
    callEmergency() {
      uni.showModal({
        title: '紧急联系',
        content: '是否拨打医院急救电话？',
        confirmText: '拨打',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: '120'
            })
          }
        }
      })
    },

    // 重新连接
    async reconnect() {
      try {
        this.connectionStatus = 'connecting'
        await this.connectWebSocket()
        this.connectionStatus = 'connected'
        
        uni.showToast({
          title: '连接成功',
          icon: 'success'
        })
      } catch (error) {
        this.connectionStatus = 'disconnected'
        uni.showToast({
          title: '连接失败',
          icon: 'error'
        })
      }
    },

    // 显示设置
    showSettings() {
      this.$refs.settingsPopup.open()
    },

    // 关闭设置
    closeSettings() {
      this.$refs.settingsPopup.close()
    },

    // 切换告警级别
    toggleAlertLevel(level, e) {
      this.alertSettings[level] = e.detail.value
    },

    // 切换设置项
    toggleSetting(key, e) {
      this.alertSettings[key] = e.detail.value
    },

    // 保存设置
    saveSettings() {
      uni.setStorageSync('alertSettings', this.alertSettings)
      this.closeSettings()
      
      uni.showToast({
        title: '设置已保存',
        icon: 'success'
      })
    },

    // 加载设置
    loadSettings() {
      const settings = uni.getStorageSync('alertSettings')
      if (settings) {
        this.alertSettings = { ...this.alertSettings, ...settings }
      }
    },

    // 获取状态图标
    getStatusIcon() {
      switch (this.connectionStatus) {
        case 'connected':
          return 'icon-wifi'
        case 'connecting':
          return 'icon-loading'
        case 'disconnected':
          return 'icon-wifi-off'
        default:
          return 'icon-wifi'
      }
    },

    // 获取状态标题
    getStatusTitle() {
      switch (this.connectionStatus) {
        case 'connected':
          return '实时连接正常'
        case 'connecting':
          return '正在连接...'
        case 'disconnected':
          return '连接已断开'
        default:
          return '未知状态'
      }
    },

    // 获取状态描述
    getStatusDesc() {
      switch (this.connectionStatus) {
        case 'connected':
          return '正在接收实时告警消息'
        case 'connecting':
          return '正在建立连接，请稍候'
        case 'disconnected':
          return '无法接收实时消息，请检查网络'
        default:
          return ''
      }
    },

    // 获取级别图标
    getLevelIcon(level) {
      switch (level) {
        case 'high':
          return 'icon-warning'
        case 'medium':
          return 'icon-exclamation'
        case 'low':
          return 'icon-info'
        default:
          return 'icon-info'
      }
    },

    // 获取级别文本
    getLevelText(level) {
      switch (level) {
        case 'high':
          return '高级别'
        case 'medium':
          return '中级别'
        case 'low':
          return '低级别'
        default:
          return '未知'
      }
    },

    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) { // 1分钟内
        return '刚刚'
      } else if (diff < 3600000) { // 1小时内
        return `${Math.floor(diff / 60000)}分钟前`
      } else if (diff < 86400000) { // 1天内
        return `${Math.floor(diff / 3600000)}小时前`
      } else {
        return date.toLocaleDateString('zh-CN')
      }
    },

    // 格式化日期时间
    formatDateTime(timestamp) {
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style lang="scss" scoped>
.alerts-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #e6f7ff 50%, #f8f9fa 100%);
  padding-bottom: 120rpx;
}

// 连接状态 - 增强版
.connection-status {
  background: linear-gradient(135deg, white 0%, #fafbfc 100%);
  padding: 36rpx 32rpx;
  margin: 20rpx 16rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
  
  &.connected {
    border-left: 8rpx solid #52c41a;
  }
  
  &.connecting {
    border-left: 8rpx solid #1890ff;
  }
  
  &.disconnected {
    border-left: 8rpx solid #f5222d;
  }
}

.status-indicator {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  
  .iconfont {
    font-size: 32rpx;
  }
}

.connection-status.connected .status-indicator {
  background: #f6ffed;
  color: #52c41a;
}

.connection-status.connecting .status-indicator {
  background: #e6f7ff;
  color: #1890ff;
  
  .iconfont {
    animation: rotate 1s linear infinite;
  }
}

.connection-status.disconnected .status-indicator {
  background: #fff2f0;
  color: #f5222d;
}

.status-text {
  flex: 1;
}

.status-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #262626;
  margin-bottom: 8rpx;
}

.status-desc {
  font-size: 24rpx;
  color: #8c8c8c;
}

.reconnect-btn {
  padding: 16rpx 32rpx;
  background: #f5222d;
  color: white;
  border: none;
  border-radius: 24rpx;
  font-size: 24rpx;
}

// 筛选区域 - 增强版
.filter-section {
  background: linear-gradient(135deg, white 0%, #fafbfc 100%);
  padding: 28rpx 0;
  margin: 20rpx 16rpx;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
}

.filter-scroll {
  white-space: nowrap;
}

.filter-list {
  display: inline-flex;
  gap: 16rpx;
  padding: 0 32rpx;
}

.filter-item {
  padding: 20rpx 36rpx;
  background: #f5f5f5;
  border-radius: 36rpx;
  font-size: 26rpx;
  color: #595959;
  white-space: nowrap;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
    background: rgba(24,144,255,0.1);
    transform: translateY(-2rpx);
  }
  
  &.active {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    color: white;
    box-shadow: 0 4rpx 16rpx rgba(24,144,255,0.3);
    transform: translateY(-2rpx);
  }
}

.filter-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #f5222d;
  color: white;
  font-size: 18rpx;
  padding: 4rpx 8rpx;
  border-radius: 16rpx;
  min-width: 24rpx;
  text-align: center;
  line-height: 1.2;
}

// 告警列表 - 增强版
.alerts-list {
  padding: 0 16rpx;
}

.alert-item {
  background: linear-gradient(135deg, white 0%, #fafbfc 100%);
  border-radius: 28rpx;
  padding: 36rpx 32rpx;
  margin: 0 16rpx 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.12);
  }
  
  &.level-high {
    border-left: 8rpx solid #f5222d;
  }
  
  &.level-medium {
    border-left: 8rpx solid #fa8c16;
  }
  
  &.level-low {
    border-left: 8rpx solid #52c41a;
  }
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.alert-level {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
  
  .iconfont {
    font-size: 20rpx;
    margin-right: 8rpx;
  }
  
  &.level-high {
    background: #fff2f0;
    color: #f5222d;
  }
  
  &.level-medium {
    background: #fff7e6;
    color: #fa8c16;
  }
  
  &.level-low {
    background: #f6ffed;
    color: #52c41a;
  }
}

.alert-time {
  font-size: 22rpx;
  color: #bfbfbf;
}

.alert-content {
  margin-bottom: 24rpx;
}

.alert-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #262626;
  margin-bottom: 12rpx;
}

.alert-message {
  font-size: 26rpx;
  color: #595959;
  line-height: 1.5;
  margin-bottom: 12rpx;
}

.alert-location {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #8c8c8c;
  
  .iconfont {
    font-size: 20rpx;
    margin-right: 8rpx;
  }
}

.alert-actions {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  padding: 16rpx 24rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  border: none;
  
  .iconfont {
    font-size: 20rpx;
    margin-right: 8rpx;
  }
  
  &.ack-btn {
    background: #52c41a;
    color: white;
  }
  
  &.share-btn {
    background: #f5f5f5;
    color: #595959;
  }
}

.alert-status {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #52c41a;
  
  .iconfont {
    font-size: 20rpx;
    margin-right: 8rpx;
  }
}

// 弹窗样式
.alert-detail-popup,
.settings-popup {
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #262626;
}

.popup-close {
  padding: 16rpx;
  color: #8c8c8c;
  
  .iconfont {
    font-size: 32rpx;
  }
}

.detail-content {
  padding: 32rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.detail-level {
  display: inline-flex;
  align-items: center;
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  font-weight: 500;
  margin-bottom: 24rpx;
  
  .iconfont {
    font-size: 20rpx;
    margin-right: 8rpx;
  }
  
  &.level-high {
    background: #fff2f0;
    color: #f5222d;
  }
  
  &.level-medium {
    background: #fff7e6;
    color: #fa8c16;
  }
  
  &.level-low {
    background: #f6ffed;
    color: #52c41a;
  }
}

.detail-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #262626;
  margin-bottom: 16rpx;
}

.detail-message {
  font-size: 28rpx;
  color: #595959;
  line-height: 1.6;
  margin-bottom: 32rpx;
}

.detail-info {
  margin-bottom: 32rpx;
}

.info-row {
  display: flex;
  margin-bottom: 16rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 26rpx;
  color: #8c8c8c;
  width: 120rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 26rpx;
  color: #262626;
  flex: 1;
}

.detail-description,
.detail-instructions {
  margin-bottom: 32rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.desc-title,
.instructions-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #262626;
  margin-bottom: 16rpx;
}

.desc-content {
  font-size: 26rpx;
  color: #595959;
  line-height: 1.6;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.instructions-list {
  .instruction-item {
    font-size: 26rpx;
    color: #595959;
    line-height: 1.6;
    margin-bottom: 12rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.detail-actions {
  display: flex;
  gap: 16rpx;
  padding: 32rpx;
  border-top: 2rpx solid #f5f5f5;
}

.detail-btn {
  flex: 1;
  padding: 32rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  
  .iconfont {
    font-size: 24rpx;
    margin-right: 12rpx;
  }
  
  &.ack-btn {
    background: #52c41a;
    color: white;
  }
  
  &.emergency-btn {
    background: #f5222d;
    color: white;
  }
}

// 设置内容
.settings-content {
  padding: 32rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.setting-group {
  margin-bottom: 48rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.group-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #262626;
  margin-bottom: 24rpx;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.setting-label {
  font-size: 26rpx;
  color: #262626;
}

.settings-actions {
  padding: 32rpx;
  border-top: 2rpx solid #f5f5f5;
}

.settings-btn {
  width: 100%;
  padding: 32rpx;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
}

// 悬浮按钮
.floating-actions {
  position: fixed;
  bottom: 160rpx;
  right: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  z-index: 100;
}

.fab-item {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(24,144,255,0.3);
  
  .iconfont {
    font-size: 36rpx;
  }
  
  &:active {
    transform: scale(0.95);
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 120rpx 32rpx;
}

.empty-image {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #8c8c8c;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: #bfbfbf;
}

// 动画
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>